<template>
  <div class="app-container" style="padding: 0">
    <el-select
      class="main-select-tree"
      ref="selectTree"
      :value="selectValue"
      :style="selectStyle"
      clearable
      @clear="clearSelectInput"
    >
      <el-input
        style="width: 460px; margin-left: 10px; margin-bottom: 10px;"
        placeholder="输入关键字进行过滤"
        v-model="filterText"
        clearable
      >
      </el-input>
      <el-option
        v-for="item in fakeOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        style="display: none;"
      />
      <el-tree
        class="main-select-el-tree"
        ref="selecteltree"
        :data="filterTree"
        node-key="id"
        highlight-current
        :props="defaultProps"
        @node-click="handleNodeClick"
        :current-node-key="value"
        :expand-on-click-node="true"
        default-expand-all
        filter="type"
        :filter-node-method="filterNode"
      />
    </el-select>
  </div>
</template>

<script>
import { param2ObjForSplit, deepMerge, deepClone, fieldQueryLike, sortArray } from './utils/index'
export default {
  props: {
    selectValue: {
      type: Number,
    },
    options: {
      type: Array,
      default: ()=> {
        return [];
      },
    },
    selectStyle: {
      type: Object,
      default: ()=> {
        return {};
      },
    }
  },
  data() {
    return {
      filterText: "",
      value: "",
      filterTree: [],
      fakeOptions: [],
      defaultProps: {
        children: "children",
        label: "name",
        // value: 'id'
      },
    };
  },
  model:{
    prop:'selectValue',
    event:'updateSelectValue' //这里名称随意，和上面的emit保持一致即可
  },
  watch: {
    filterText(val) {
      this.$refs.selecteltree.filter(val);
    },
    options(newV) {
      this.formatData(newV);
    }
  },
  methods: {
    filterNode(value, data) {
      console.log('filterNode', value, data);
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 递归遍历数据
    formatData(data) {
      console.log('formatData');
      let fakeOptions = [];
      let filterTree = deepClone(data);
      const formatDataRecursive = (data) => {
        for(let index = data.length -1; index >= 0; index --) {
          let item = data[index];
          if(item.type == 1) {
            fakeOptions.push({ label: item.name, value: item.id });
            if (item.children && item.children.length > 0) {
              formatDataRecursive(item.children);
            }
          } else {
            data.splice(index, 1);
          }
        }
      };
      formatDataRecursive(filterTree);
      console.log('formatData', fakeOptions, filterTree);
      this.fakeOptions = fakeOptions;
      this.filterTree = filterTree;
    },
    // 点击事件
    handleNodeClick(node) {
      console.log('handleNodeClick', node);
      this.value = node.name;
      this.$refs.selectTree.blur();
      this.$emit('updateSelectValue', node.id);
    },
    // 清空事件
    clearSelectInput() {
      this.$emit('updateSelectValue', '');
      // 获取 el-tree 实例的引用
      const elTree = this.$refs.selecteltree;
      // 将当前选中的节点设置为 null
      elTree.setCurrentKey(null);
    },
  },
};
</script>

<style scoped>
.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}
.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}
</style>
